 <!-- <template>
    <div class="login-container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>用户注册</span>
          </div>
        </template>
  
        <el-form 
          :model="registForm" 
          :rules="rules" 
          ref="registFormRef"
          label-width="80px"
          @keyup.enter="submitForm">
          
          <el-form-item label="账号" prop="username">
            <el-input v-model="registForm.username" clearable />
          </el-form-item>
  
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="registForm.password"
              type="password"
              show-password
            />
          </el-form-item>
  
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="registForm.confirmPassword"
              type="password"
              show-password
            />
          </el-form-item>
  
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="registForm.remark"
              type="textarea"
              :rows="2"
            />
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="submitForm">立即注册</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import axios from '@/utils/request.js';
  
  const registFormRef = ref(null);
  const registForm = reactive({
    username: '',
    password: '',
    confirmPassword: '',
    remark: ''
  });
  
  const rules = reactive({
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      { min: 4, max: 16, message: '长度4-16个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { pattern: /^\S{6,18}$/, message: '6-18位非空字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { validator: (rule, value, callback) => {
          if (value !== registForm.password) {
            callback(new Error('两次密码不一致'));
          } else {
            callback();
          }
        }, trigger: 'blur' }
    ]
  });
  
  const submitForm = () => {
    registFormRef.value.validate(valid => {
      if (valid) {
        axios.post('/user/regist', registForm)
          .then(res => {
            if (res.success) {
              ElMessage.success('注册成功');
              setTimeout(() => {
                window.location.href = '/login';
              }, 1500);
            } else {
              ElMessage.error(res.message || '注册失败');
            }
          })
          .catch(() => ElMessage.error('网络异常'));
      }
    });
  };
  
  const resetForm = () => {
    registFormRef.value.resetFields();
  };
  </script> 









  <template>
    <div class="register-container">
      <el-card class="register-card">
        <h2>用户注册</h2>
        <el-form :model="formData" :rules="rules" ref="registerForm" label-width="80px">
          <el-form-item label="账号" prop="name">
            <el-input v-model="formData.name" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input v-model="formData.pass" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="beizhu">
            <el-input v-model="formData.beizhu" placeholder="请输入备注信息"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">注册</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
        <div v-if="message" class="message">{{ message }}</div>
      </el-card>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        formData: {
          name: '',
          pass: '',
          beizhu: ''
        },
        rules: {
          name: [
            { required: true, message: '账号不能为空', trigger: 'blur' },
            { min: 3, max: 20, message: '账号长度在3到20个字符之间', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
          ],
          beizhu: [
            { max: 100, message: '备注最多100个字符', trigger: 'blur' }
          ]
        },
        message: ''
      };
    },
    methods: {
      submitForm() {
        this.$refs.registerForm.validate((valid) => {
          if (valid) {
            axios.post('/user/register', this.formData)
              .then(response => {
                if (response.data.success) {
                  this.message = '注册成功！';
                } else {
                  this.message = '注册失败：' + response.data.message;
                }
              })
              .catch(error => {
                console.error(error);
                this.message = '注册失败：网络错误';
              });
          } else {
            this.message = '表单信息填写有误，请检查';
          }
        });
      },
      resetForm() {
        this.$refs.registerForm.resetFields();
        this.message = '';
      }
    }
  };


  </script>
  
  <style scoped>
  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
  }
  .register-card {
    width: 400px;
    padding: 20px;
  }
  .message {
    margin-top: 10px;
    color: #ff4d4f;
  }
  </style>
 -->
 <template>
    <div class="register-container">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>注册</span>
          </div>
        </template>
        <!-- 网页的作用1是展示数据，2是收集数据，收集数据靠表单 -->
        <!--  -->
        <el-form :model="registerForm" :rules="rules" ref="registerFormRef" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="registerForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="registerForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="registerForm.confirmPassword" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">注册</el-button>
            <el-button type="warning" @click="resetForm">重置</el-button>
            <el-button type="info" @click="goToLogin">返回登录</el-button>
          </el-form-item>
        </el-form>
  
      </el-card>
  
    </div>
  </template>
  <script setup>
  import { reactive, ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import axios from '@/utils/request.js';
  
      //ref方法是定义一个变量，并且初始化赋值，同时让这个变量可以在模板中使用，这种变量是响应式变量
      const registerFormRef = ref(null);
      //reactive定义响应式对象
      const registerForm = reactive({
        username: '',
        password: '',
        confirmPassword: '',
      });
      //定义表单验证规则对象
      const rules = reactive({
        //对username字段进行不为空验证，message是提示信息，trigger是验证时机,blur光标离开时
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value !== registerForm.password) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
      });
  
      //定一个方法submitForm
      const submitForm = () => {
        registerFormRef.value.validate((valid) => {
          if (valid) {
            //发送注册请求
            axios({
  url: '/register',
  method: 'post',
  params: { // 使用 data 而不是 params
    username: registerForm.username,
    password: registerForm.password,
  },
}).then((res) => {
  if (res.result == 'success') {
    ElMessage.success('注册成功');
    window.location.href = '/login';
  } else {
    ElMessage.error(res.message || '注册失败');
    return false;
  }
}).catch((error) => {
  console.error(error);
  ElMessage.error('网络请求失败');
});
          } else {
            ElMessage.error('表单填写有误');
            return false;
          }
        });
      };
      //定一个方法resetForm，重置表单
      const resetForm = () => {
        registerFormRef.value.resetFields();
      };
      //定一个方法goToLogin，跳转到登录页面
      const goToLogin = () => {
        window.location.href = '/login';
      };
  </script>
  <style scoped>
  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #f0f2f5;
  }
  .box-card {
    width: 400px;
  }
  </style>